import SuperTable from './index.vue'
import {h,ref} from 'vue'
import { openDialog as _openDialog,deepClone,MessageSuccess,MessageError,MessageInfo,MessageBox} from './utils/util.js'
import SubmitForm from '../SuperForm/SubmitForm.vue'
import DetailForm from '../SuperForm/DetailForm.vue'
//生成一个添加了配置的组件
export default class SuperTableVue{
    SuperTableRef = undefined
    tableConfig = undefined
    searchConfig = undefined
    rowAddConfig = undefined
    rowEditConfig = undefined
    rowDetailConfig = undefined
    rowDeleteConfig = undefined
    otherConfig = undefined

    constructor(config){
        const SuperTableRef = ref(null)
        this.SuperTableRef = SuperTableRef
        this.tableConfig = config.tableConfig
        this.searchConfig = config.searchConfig
        this.rowAddConfig = config.rowAddConfig
        this.rowEditConfig = config.rowEditConfig
        this.rowDetailConfig = config.rowDetailConfig
        this.rowDeleteConfig = config.rowDeleteConfig
        this.otherConfig = config.otherConfig
        return {
            setup:(a,b)=>{
                return (c,d)=>{
                    console.log(a,b,c,d)
                    return h(SuperTable,{...this._getVueNeedProps(config),ref:SuperTableRef},this._getVueNeedSlots(config))
                }
            }
        }
    }
    //从config中,拿到插槽
    _getVueNeedSlots(config){
        //表格的插槽
        let detailPropList = config.tableConfig?.props
        let result = {}
        detailPropList.filter(el=>el.slot).forEach(item=>{
            result[`table-${item.prop}`] = item.slot.bind(this)//绑定this为这个组件,slot不写箭头函数,不然会导致this丢失
        })
        //搜索按钮区域的插槽
        config.searchConfig.slot && (result['search-buttons'] = config.searchConfig.slot.bind(this))
        return result;
    }
    //从config中,拿到props
    _getVueNeedProps(config){
        const needProps = {
            getTableDataFunction:config.tableConfig?.getDataFunction,
            detailPropList:config.tableConfig?.props,
            searchConfig:{
                searchProps: config.searchConfig?.props,
                labelWidth: config.searchConfig?.labelWidth,
                itemStyle: config.searchConfig?.itemStyle,
                showExportExcel:config.searchConfig?.showExportExcel,
                colLayout: config.searchConfig?.colLayout,
            },
            showIndexColumn:config.tableConfig?.showIndexColumn,
            showSearch:config.otherConfig?.showSearch,
            showFooter:config.otherConfig?.showFooter,
            doSomeSthingbeforeQueryData:config.otherConfig?.doSomeSthingbeforeQueryData,
            cellStyle: config.otherConfig?.cellStyle,
            rowKey: config.otherConfig?.rowKey,
            globalMaxTextLine:config.otherConfig?.globalMaxTextLine
        }
        return needProps
    }

    edit(row){//打开编辑页面
        if( !this.rowEditConfig ){
            MessageError("请设置rowEditConfig")
            return
        }
        //1.拿到表单配置项
        let props = this.rowEditConfig?.props
        //2.打开弹框
        _openDialog({
            component:SubmitForm,
            props:(closeDialog)=>{
                return{
                    config:{searchProps:props||[]},
                    transferData:row,
                    onSubmit:(data)=>{
                        if(this.rowEditConfig.editDataFunction){
                            this.rowEditConfig.editDataFunction(data,closeDialog).then(res=>{
                                if(res.ok){
                                    MessageSuccess("保存成功!")
                                    this.refreshTableData()
                                    closeDialog()
                                }else{
                                    MessageError("保存失败!")
                                }
                            },(e)=>{
                                MessageError("保存失败:"+e)
                            })
                        }
                    },
                    onCancel:(data)=>{
                        closeDialog()
                    },
                }
            },
        })
    }
    add(row){//打开编辑页面
        if(this.rowAddConfig){
            //1.拿到表单配置项
            let props = this.rowAddConfig?.props || []
            //2.打开弹框
            _openDialog({
                component:SubmitForm,
                props:(closeDialog)=>{
                    return{
                        config:{searchProps:props||[]},
                        transferData:row,
                        onSubmit:(data)=>{
                            if(this.rowAddConfig.addDataFunction){
                                this.rowAddConfig.addDataFunction(data,closeDialog).then(res=>{
                                    if(res.ok){
                                        MessageSuccess("保存成功!")
                                        this.refreshTableData()
                                        closeDialog()
                                    }else{
                                        MessageError("保存失败!")
                                    }
                                },(e)=>{
                                    MessageError("保存失败:"+e)
                                })
                            }
                        },
                        onCancel:(data)=>{
                            closeDialog()
                        },
                    }
                },
            })
        }else if(this.rowEditConfig){
            this.edit(row)
        }else{
            MessageError("请设置rowAddConfig或者rowEditConfig")
            return
        }
    }
    detail(row){//打开详情页面.
        //1.拿到表单配置项
        if( !this.rowDetailConfig ){
            MessageError("请设置rowDetailConfig")
            return
        }
        let props = this.rowDetailConfig?.props
        //2.打开弹框
        _openDialog({
            component:DetailForm,
            props:(closeDialog)=>{
                return{
                    config:{searchProps:props||[]},
                    transferData:row,
                    onCancel:(data)=>{
                        closeDialog()
                    },
                }
            },
        })
    }
    delete(row){//删除数据
        if( !this.rowDeleteConfig ){
            MessageError("请设置rowDeleteConfig")
            return
        }
        let deleteDataFunction = this.rowDeleteConfig.deleteDataFunction
        MessageBox("请确认是否删除?", "提示", "warning")
        .then(async() => {
            deleteDataFunction(row).then(res=>{
                if(res.ok){
                    MessageSuccess("删除成功!")
                    this.refreshTableData()
                }else{
                    MessageError("删除失败:"+res.msg)
                }
            },(e)=>{
                MessageError("删除失败:"+e)
            })
        })
        .catch((error) => {});
    }
    refreshTableData(){//刷新页面
        this.SuperTableRef.value.refresh()
    }
    openDialog(config){
        _openDialog(config)
    }
}
